<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { apiHome } from '@/api/strategy.js'

const comData = reactive({
  modalVisible: false,
  form: {
    deviceCode: '',
    deviceId: '',
    deviceName: '',
    level: 0,
    satCode: '',
    satId: '',
    satName: '',
    subsystemId: '',
    subsystemName: '',
    times: 0,
    type: 0
  }
})
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  deviceData: {
    type: Object,
    default: null
  },
  parentNodes: {
    type: Array,
    default: () => []
  }
})
// watch(() => props.visible, () => {
//
//
// })

const putData = (type) => {
  comData.modalVisible = props.visible
  const satellite = props.parentNodes.find((item) => Object.prototype.hasOwnProperty.call(item, 'twoline'))
  console.log(satellite, props.deviceData)
  if (!satellite || !props.deviceData) {
    return false
  }

  comData.form = {
    deviceCode: props.deviceData.code,
    deviceId: props.deviceData.deviceId,
    deviceName: props.deviceData.name,
    level: 4,
    times: 5,
    type: type || 0,
    id: null
  }
  comData.form.satCode = satellite.code
  comData.form.satName = satellite.name
  comData.form.satId = satellite.satId
  return true
}
const loadRecord = (type) => {
  if (putData(type)) {
    apiHome
      .getUpgradeInfo({
        deviceId: comData.form.deviceId,
        satId: comData.form.satId,
        type: type || comData.form.type
      })
      .then((res) => {
        if (res.code === 200) {
          if (res.data) {
            comData.form = JSON.parse(JSON.stringify(res.data, null, 2))
          }
        } else {
          Message.error(res.msg)
        }
      })
  }
}
const RefForm = ref(null)
const save = () => {
  if (!comData.form.level) {
    return Message.error('请选择升级后告警等级')
  }
  RefForm.value.validate((valid) => {
    if (!valid) {
      const loading = Message.loading({
        content: '保存中...',
        duration: 0
      })
      return apiHome
        .upgradeSave({ ...comData.form })
        .then((res) => {
          if (res.code === 200) {
            Message.success('保存成功')
            loadRecord(comData.form.type)
          } else {
            Message.error(res.message)
          }
        })
        .catch((err) => {
          Message.error(err.message)
        })
        .finally(() => {
          loading.close()
        })
    }
    return false
  })
}
onMounted(() => {
  loadRecord()
})
</script>

<template>
  <a-modal v-model:visible="comData.modalVisible" title="告警设置" width="800px" :footer="false">
    <a-form ref="RefForm" :model="comData.form" :auto-label-width="true">
      <a-tabs direction="vertical" position="left" v-model="comData.form.type" @change="loadRecord">
        <a-tab-pane
          v-for="item in [
            { label: '多级门限预警', value: 0 },
            { label: '关联分析', value: 1 },
            { label: '常值监测', value: 2 },
            { label: '模型推理', value: 3 },
            { label: '时序数据计算', value: 4 }
          ]"
          :key="item.value"
          :title="item.label"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item label="卫星">
                <label
                  >{{ comData.form.satName }}
                  <a-tag size="mini">{{ comData.form.satCode }}</a-tag>
                </label>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="设备">
                <label
                  >{{ comData.form.deviceName }}
                  <a-tag size="mini">{{ comData.form.deviceCode }}</a-tag>
                </label>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="升级后告警等级" field="level" :rules="[{ required: true, message: '必填项' }]">
                <a-button-group size="small">
                  <a-button
                    class="!rounded-none"
                    v-for="(item, index) in [1, 2, 3, 4]"
                    :type="item === comData.form.level ? 'primary' : 'dashed'"
                    :key="index"
                    @click="comData.form.level = item"
                    >{{ item }}
                  </a-button>
                </a-button-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="升级所需次数" field="times" :rules="[{ required: true, message: '必填项' }]">
                <a-input-number class="!w-[120px]" v-model="comData.form.times" :min="1" :max="9999">
                  <template #append>次</template>
                </a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="">
                <a-space>
                  <!--                    <a-button type="dashed">-->
                  <!--                      <template #icon>-->
                  <!--                        <IconArrowLeft/>-->
                  <!--                      </template>-->
                  <!--                      取消-->
                  <!--                    </a-button>-->
                  <a-button @click="save" type="primary">
                    <template #icon>
                      <IconSave />
                    </template>
                    保存
                  </a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-modal>
</template>

<style scoped lang="less"></style>
